1 00:00:00,920 --> 00:00:07,130 Hey there in this lecture, let's go ahead and take a look at how to use the beam instance in Roblox. 2 00:00:07,130 --> 00:00:12,290 This is perhaps my favorite instance in Roblox Studio, as it allows you to improve the atmosphere in 3 00:00:12,290 --> 00:00:18,110 your games, such as adding the illusion of a light ray emanating from a light source. 4 00:00:18,410 --> 00:00:24,080 To use a beam, we're going to need two attachments that define the starting point and ending point 5 00:00:24,080 --> 00:00:25,160 of our beam. 6 00:00:25,250 --> 00:00:28,730 So let's go ahead and create a new part inside of the workspace. 7 00:00:28,730 --> 00:00:30,140 I'm going to anchor this part. 8 00:00:30,140 --> 00:00:33,830 And inside of this part I'm going to add my first attachment. 9 00:00:33,830 --> 00:00:35,960 I'll call this attachment one. 10 00:00:35,960 --> 00:00:40,190 And then I'm going to duplicate that and call this one attachment number two. 11 00:00:40,280 --> 00:00:45,410 And then I can go ahead and move these attachments around to define the starting and ending point of 12 00:00:45,410 --> 00:00:46,130 my beam. 13 00:00:46,130 --> 00:00:49,430 So for attachment one I'll just move it up a bit. 14 00:00:50,020 --> 00:00:51,430 And we'll just do something like that. 15 00:00:51,430 --> 00:00:55,510 So this is the starting point and this is the ending point of my beam. 16 00:00:55,510 --> 00:00:58,870 Now let's go ahead and add a beam instance inside of here. 17 00:00:59,080 --> 00:01:01,930 And then we can go ahead and define the first attachment. 18 00:01:01,930 --> 00:01:04,900 And then we can go ahead and define the second attachment. 19 00:01:05,900 --> 00:01:08,180 And right now we're not able to see the beam. 20 00:01:08,180 --> 00:01:12,860 And that's because we have to change or enable this property to true of face camera. 21 00:01:12,860 --> 00:01:14,060 So let me enable that. 22 00:01:14,240 --> 00:01:16,880 And now as you can see here is our beam. 23 00:01:16,880 --> 00:01:20,630 And it's going to follow along with our camera. 24 00:01:20,630 --> 00:01:23,210 If I disable it then the beam disappears. 25 00:01:23,210 --> 00:01:26,180 And that's because of the way we have these two attachments set up. 26 00:01:26,180 --> 00:01:34,010 If I move this attachment, as you can see now the beam is visible and that's because the beam is 2D. 27 00:01:34,010 --> 00:01:38,570 So of course when we merge it this way, it's going to basically collapse in on itself. 28 00:01:38,570 --> 00:01:41,030 And we can't see the beam rendered anymore. 29 00:01:42,350 --> 00:01:47,060 But that's one of the first properties that you'll want to use for beams is if you want to have it face 30 00:01:47,060 --> 00:01:48,560 the camera, you'll just check that. 31 00:01:48,560 --> 00:01:51,140 And now our beam is facing our camera. 32 00:01:51,650 --> 00:01:56,120 Now our beam has a whole bunch more properties we can go ahead and manipulate, such as the color of 33 00:01:56,120 --> 00:01:56,720 the beam. 34 00:01:56,720 --> 00:02:02,300 And the cool thing about the color is that we are actually able to put in a color sequence, so we can 35 00:02:02,300 --> 00:02:06,110 set up the colors in a gradient however we would like on our beam. 36 00:02:06,110 --> 00:02:11,480 Of course, we can change the beam to whatever color we want, and we can also go ahead and hit these 37 00:02:11,480 --> 00:02:14,480 three buttons here and define a gradient for our beam. 38 00:02:14,480 --> 00:02:19,460 So if you want to have like a nice gradient color to your beam, let me put a color in the center here. 39 00:02:19,460 --> 00:02:20,780 Do something like that. 40 00:02:20,990 --> 00:02:25,190 Let me put a color down here and I'll put a color over here. 41 00:02:27,510 --> 00:02:31,080 Now we kind of have a cool little gradient going on with our beam. 42 00:02:31,560 --> 00:02:35,070 We have some other properties here, such as whether or not the beam is enabled. 43 00:02:35,310 --> 00:02:41,220 We have light emission, which determines how much of the color of the beam should blend with the colors 44 00:02:41,220 --> 00:02:45,240 behind the beam, so like the environment behind it when we're looking through it. 45 00:02:45,600 --> 00:02:48,930 So if I increase the light emission to like a value of one. 46 00:02:49,710 --> 00:02:53,880 As you can see, the colors of our beam are becoming more washed out, and that's because it's having 47 00:02:53,880 --> 00:02:56,820 to blend with the environment behind it. 48 00:02:56,820 --> 00:02:59,010 And it's also changing the light emission. 49 00:02:59,010 --> 00:03:00,570 A little bit of our beam. 50 00:03:01,110 --> 00:03:03,960 I'm going to leave this value at zero for now. 51 00:03:04,020 --> 00:03:06,480 The next one is called light influence. 52 00:03:06,480 --> 00:03:12,570 And this determines how much the environment of our game affects the brightness or the colors of our 53 00:03:12,570 --> 00:03:13,110 beam. 54 00:03:13,110 --> 00:03:18,660 So for example, since our light influence is at one, that means the lighting in our game completely 55 00:03:18,660 --> 00:03:21,210 affects how this beam is going to be displayed. 56 00:03:21,210 --> 00:03:26,280 So that means if we set it to be nighttime, as you can see, our beam has darkened in color. 57 00:03:26,280 --> 00:03:30,660 If we continue to reduce the brightness in our game, we'll set it to a value of zero. 58 00:03:30,660 --> 00:03:33,660 As you can see, our beam has become even more dark. 59 00:03:33,930 --> 00:03:38,850 But if you don't want your beam to be affected by the lighting in your game, then you can go ahead 60 00:03:38,850 --> 00:03:41,520 and set the light influence to a value of zero. 61 00:03:41,520 --> 00:03:46,770 And now, no matter what the lighting in your game is, it's going to match whatever the brightness 62 00:03:46,770 --> 00:03:48,600 is that you set for your beam. 63 00:03:48,600 --> 00:03:54,510 So as you can see, if I set my light influence below one, I've unlocked a new property, which is 64 00:03:54,510 --> 00:03:59,160 brightness, and I can increase this brightness to make my beam even brighter. 65 00:03:59,160 --> 00:04:02,850 And we can set this value all the way up to 10,000. 66 00:04:02,850 --> 00:04:06,870 But at this point, it'll wash the colors out and you won't be able to see much. 67 00:04:07,080 --> 00:04:11,370 But I'll leave it at five for now and let me go ahead and reset. 68 00:04:12,670 --> 00:04:15,430 The time of day back to 12:00. 69 00:04:16,460 --> 00:04:22,250 Now another property here is texture, and this means we can add image textures into our beam. 70 00:04:22,250 --> 00:04:25,100 And we can define other properties for this texture. 71 00:04:25,100 --> 00:04:27,320 So let's go ahead and open up the toolbox. 72 00:04:27,770 --> 00:04:29,300 And I'm going to head to images. 73 00:04:29,300 --> 00:04:33,500 And I'm going to basically just grab a random image from out of here. 74 00:04:34,290 --> 00:04:36,330 Let's just grab the Roblox icon. 75 00:04:36,330 --> 00:04:40,110 We'll copy that asset ID, and then we'll paste that into the texture. 76 00:04:40,900 --> 00:04:46,750 And as you can see, our texture is displaying a very distorted version of our Roblox logo. 77 00:04:46,750 --> 00:04:52,210 And that's because the texture mode is currently set to stretch, which is going to stretch the texture 78 00:04:52,210 --> 00:04:54,670 to match the length of our beam. 79 00:04:54,670 --> 00:04:59,110 You can also see that our beam is moving, and that's because the texture speed is set at the value 80 00:04:59,110 --> 00:04:59,470 of one. 81 00:04:59,470 --> 00:05:05,980 But if we set it to the value of zero, as you can see, our beam stops moving and it is now stationary. 82 00:05:06,250 --> 00:05:12,220 Now, if I change the texture mode to wrap, for example, now what it's going to do, it's going to 83 00:05:12,220 --> 00:05:16,810 create tiles for the texture instead, and it's not going to distort it. 84 00:05:16,810 --> 00:05:21,670 And the size of these textures is going to be determined by the texture length property here. 85 00:05:21,670 --> 00:05:27,010 So if I increase this as you can see now it's going to start distorting our image more and more because 86 00:05:27,010 --> 00:05:30,280 it's trying to match our texture length property which is in studs. 87 00:05:30,280 --> 00:05:33,490 So right now each of the textures is five studs in length. 88 00:05:33,490 --> 00:05:38,020 If I set it back to one, each one of these are one stud in length, and you can see that our image 89 00:05:38,020 --> 00:05:40,900 texture is also affected by our gradient. 90 00:05:40,900 --> 00:05:45,370 And let me go ahead and increase the texture speed to a value of let's say five. 91 00:05:46,120 --> 00:05:51,940 As you can see, our image is moving through our beam and becoming affected by the gradient that we've 92 00:05:51,940 --> 00:05:52,600 applied. 93 00:05:53,730 --> 00:05:58,080 There's another mode in here called static, but you do not need to worry about it because if I select 94 00:05:58,080 --> 00:06:03,660 static, as you can see, it does the exact same thing as wrap, static and wrap do the same thing. 95 00:06:03,660 --> 00:06:08,850 It's just because this property takes an enum of texture mode, and the static texture mode is used 96 00:06:08,850 --> 00:06:12,180 for other instances in the game, but it's not used for the beam instance. 97 00:06:12,180 --> 00:06:16,650 So we just have stretch and wrap and static does the same thing as wrap. 98 00:06:17,250 --> 00:06:21,030 We also have the ability to determine the transparency of our beam. 99 00:06:21,030 --> 00:06:25,140 So if we don't want to see it anymore and we set it to one, boom, now we can't see it. 100 00:06:25,140 --> 00:06:30,750 The other cool thing about the transparency is we're also able to apply a number sequence to it, so 101 00:06:30,750 --> 00:06:34,320 we can change the transparency of our beam over time. 102 00:06:34,320 --> 00:06:38,820 For example, if I do something like that, let me do something like that. 103 00:06:38,820 --> 00:06:44,670 Now there's a section where our beam disappears and then reappears later in the lifetime of our beam, 104 00:06:44,670 --> 00:06:45,570 which is pretty cool. 105 00:06:45,570 --> 00:06:49,620 So we can sit here and manipulate the transparency of our beam. 106 00:06:50,820 --> 00:06:54,660 Another property inside of our beam is something called Z offset. 107 00:06:54,810 --> 00:07:01,590 And this is going to be the distance in studs the beam will display relative to the camera. 108 00:07:01,620 --> 00:07:05,490 The purpose of this property is to stop something called z fighting. 109 00:07:05,490 --> 00:07:07,950 And you've probably seen Z fighting. 110 00:07:07,950 --> 00:07:14,400 For example, if I duplicate this part and I have them overlay each other and I change the color of 111 00:07:14,400 --> 00:07:16,440 this part to something like a green. 112 00:07:16,530 --> 00:07:23,340 As you can see, now we're having Z fighting, and that's because the surfaces of these parts are perfectly 113 00:07:23,340 --> 00:07:25,080 overlaid above each other. 114 00:07:25,080 --> 00:07:30,660 So the engine is having a hard time figuring out which one of these parts to render as we move our camera 115 00:07:30,660 --> 00:07:31,410 around. 116 00:07:31,590 --> 00:07:37,920 The same thing can happen with beams, so if we duplicate this, we'll have a duplicate set of beams 117 00:07:37,920 --> 00:07:39,780 being overlaid over each other. 118 00:07:39,780 --> 00:07:45,780 If we don't want these beams to have Z fighting, and we want to be able to just offset them slightly 119 00:07:45,780 --> 00:07:50,820 away from each other, then that's what the Z offset property is going to be for. 120 00:07:50,820 --> 00:07:56,730 For example, if I set this to a value of ten and let me go ahead and back up, as you can see, one 121 00:07:56,730 --> 00:08:03,090 of my beams is now being offset ten studs away from its original position relative to where my camera 122 00:08:03,090 --> 00:08:04,020 is looking. 123 00:08:04,290 --> 00:08:10,230 If I set it to a smaller value of like 0.1, now it is offset by 0.1 studs, but it's a little bit harder 124 00:08:10,230 --> 00:08:14,070 to tell because 0.1 studs is not a very big gap. 125 00:08:15,130 --> 00:08:16,840 Let me go ahead and delete this other one. 126 00:08:16,840 --> 00:08:21,730 The next prompt we can go ahead and take a look at are these two properties down here called curve size 127 00:08:21,730 --> 00:08:23,890 zero and curve size one. 128 00:08:23,890 --> 00:08:29,650 Now the purpose of these two properties is to allow us to make curves in our beam. 129 00:08:29,650 --> 00:08:33,850 And that's because these two properties are going to apply a bezier curve to the tween. 130 00:08:33,850 --> 00:08:37,900 And these determine the position of the second point. 131 00:08:37,900 --> 00:08:44,050 That's going to be basically pulling this beam in a particular direction to apply a curve. 132 00:08:44,350 --> 00:08:49,900 For example, with my attachment number one, the curve size zero. 133 00:08:49,900 --> 00:08:55,120 If I set it to a value of like ten, that means the position is going to be ten studs in the y direction 134 00:08:55,120 --> 00:08:56,680 of our attachment. 135 00:08:57,340 --> 00:08:59,560 This is the y attachment of our axis. 136 00:08:59,560 --> 00:09:04,270 And you could imagine a point ten studs in that direction of the y axis. 137 00:09:04,270 --> 00:09:07,900 And that's going to be pulling our beam in that particular direction. 138 00:09:07,900 --> 00:09:10,990 Now unfortunately this is not a good setup to demonstrate this. 139 00:09:10,990 --> 00:09:16,270 So what I'm going to do is I'm going to move my beam over like this. 140 00:09:16,420 --> 00:09:21,160 So that way we might be able to see how this property affects the beam. 141 00:09:21,160 --> 00:09:25,480 And if I set curve size zero to a value of ten. 142 00:09:26,240 --> 00:09:31,370 As you can see, our beam has slightly shifted, and that's because there is an invisible part or an 143 00:09:31,370 --> 00:09:37,760 invisible point, ten studs above our attachment that's causing the beam to be pulled in that direction. 144 00:09:37,760 --> 00:09:40,640 And we can affect this by rotating the attachment. 145 00:09:40,640 --> 00:09:45,950 So as I rotate it, as you can see, the point is still going to be in line with the y axis. 146 00:09:45,950 --> 00:09:51,530 But now it's going to be off in that direction, which is causing the beam to be pulled more in that 147 00:09:51,530 --> 00:09:52,430 direction. 148 00:09:53,500 --> 00:09:58,540 And the same thing can be done for attachment number two with the curve size one property. 149 00:09:58,540 --> 00:10:00,880 If I set this one to a value of ten. 150 00:10:01,780 --> 00:10:05,950 Now because this one is at the end part, it's going to cause it to pull downwards. 151 00:10:05,950 --> 00:10:09,490 So this is going to be in the opposite direction of the y axis. 152 00:10:09,490 --> 00:10:14,530 And if I rotate it, as you can see now it's pulling our beam in this curve. 153 00:10:14,530 --> 00:10:21,220 And you can imagine a point ten studs below the y axis pulling our beam in that particular direction. 154 00:10:22,580 --> 00:10:26,690 We've already taken a look at the face camera property if I disable it. 155 00:10:26,690 --> 00:10:29,690 As you can see now, our. 156 00:10:30,670 --> 00:10:31,000 It looks. 157 00:10:31,000 --> 00:10:32,350 Actually, this is kind of interesting. 158 00:10:32,350 --> 00:10:36,880 As you can see now, our texture is kind of being distorted because of how these beams are set up. 159 00:10:36,880 --> 00:10:39,730 So let me actually move these attachments around a little bit. 160 00:10:40,250 --> 00:10:43,010 So that way you can kind of get a better look at the texture. 161 00:10:43,010 --> 00:10:47,060 So as you can see, our texture is currently facing in one direction. 162 00:10:47,060 --> 00:10:49,040 It's not following our camera anymore. 163 00:10:49,040 --> 00:10:51,620 And we can affect this by rotating our attachments. 164 00:10:51,620 --> 00:10:56,900 So if I rotate my attachment this way now we've got an even stranger shape going on here. 165 00:10:56,900 --> 00:11:01,190 And of course I can reciprocate into the same thing and rotate my texture this way. 166 00:11:01,190 --> 00:11:07,130 And now, as you can see, our texture is facing upwards rather than side to side. 167 00:11:07,130 --> 00:11:11,300 If we don't want that to happen, of course we can enable face camera and now our texture is going to 168 00:11:11,300 --> 00:11:15,050 be looking or falling towards our camera no matter what. 169 00:11:16,920 --> 00:11:19,260 We have another property here called the segments. 170 00:11:19,260 --> 00:11:23,130 And to get a better look at this property, I'm going to disable the texture here. 171 00:11:23,130 --> 00:11:24,240 I'm going to get rid of it. 172 00:11:25,970 --> 00:11:31,850 And what segment does is it determines how detailed our beam should be. 173 00:11:31,880 --> 00:11:36,770 So if you take a close look at our texture here, you can kind of see these ridges or these bumps in 174 00:11:36,770 --> 00:11:37,520 our texture. 175 00:11:37,520 --> 00:11:41,360 And that defines the different segments inside of our beam. 176 00:11:41,360 --> 00:11:46,190 And that's because a beam is made up of a set of straight segments. 177 00:11:46,190 --> 00:11:49,670 So you kind of have one segment here, another here, another here. 178 00:11:49,670 --> 00:11:55,310 And the amount of segments we define here can determine how detailed we want our beam to be. 179 00:11:55,310 --> 00:12:00,710 The more segments, obviously, the harder it is going to be to see these little segments inside of 180 00:12:00,710 --> 00:12:01,280 our beam. 181 00:12:01,280 --> 00:12:06,980 So if we increase this value to 50, as you can see, our beam has smoothed out a lot more because we 182 00:12:06,980 --> 00:12:11,300 have more segments to spread out over this distance between our two beams. 183 00:12:11,300 --> 00:12:17,360 So it looks very smooth, and it's basically impossible to tell that this thing is made up of individual 184 00:12:17,360 --> 00:12:18,290 segments. 185 00:12:18,560 --> 00:12:23,930 If I set it to a value of like five, you can see these segments even more now because we only have 186 00:12:23,930 --> 00:12:29,150 five segments to define the distance between these two attachments. 187 00:12:29,600 --> 00:12:35,720 These other two properties are called width zero and width one, and that determines the width of our 188 00:12:35,720 --> 00:12:38,510 beam at the first and second attachment. 189 00:12:38,510 --> 00:12:44,720 So for example, if I want my beam to be wider at one end but thinner at the other end, then I can 190 00:12:44,720 --> 00:12:47,840 set this value here to be something like ten. 191 00:12:47,960 --> 00:12:54,110 And now I have a width of ten studs at this section of my beam, and then it tapers down slowly until 192 00:12:54,110 --> 00:12:55,700 we get to a width of. 193 00:12:55,700 --> 00:13:01,220 One stood at this section, and if I want to make this transition look more smooth, then I can go ahead 194 00:13:01,220 --> 00:13:03,260 and increase the number of segments. 195 00:13:04,090 --> 00:13:06,520 And now it looks a lot better than before. 196 00:13:06,520 --> 00:13:09,610 And this actually looks kind of cool, I'm not gonna lie. 197 00:13:10,300 --> 00:13:14,590 Now, the amount of possibilities that you have with beams are practically endless. 198 00:13:14,590 --> 00:13:19,600 You can design beams however you want in your game, and you can use them however you want. 199 00:13:19,600 --> 00:13:22,810 So, for example, I've created some beams back here. 200 00:13:22,900 --> 00:13:29,590 I've created this cool little kind of rainbow beam that kind of tapers down from one point to another 201 00:13:29,590 --> 00:13:31,960 point, which I thought looks pretty cool. 202 00:13:31,960 --> 00:13:38,110 I have another beam here using a circle texture, and this one just kind of flows from one beam to another. 203 00:13:38,110 --> 00:13:40,990 Beam looks kind of like a wave going on here. 204 00:13:41,670 --> 00:13:46,860 If we go ahead and look at the beam inside of this one again, it's just using a simple texture in the 205 00:13:46,860 --> 00:13:47,910 wrap texture mode. 206 00:13:47,940 --> 00:13:54,900 I've applied a rainbow color sequence, and I can of course change the length of the texture. 207 00:13:54,900 --> 00:13:58,620 So if I want my spheres to be thinner, if I set it to a value of like one. 208 00:13:58,620 --> 00:14:04,050 As you can see now, my textures are very thin and closed and bunched up with each other, but if I 209 00:14:04,080 --> 00:14:08,970 set it back to four now we have individual spheres and moving along this path. 210 00:14:09,850 --> 00:14:16,630 Another way you can utilize beams is by creating this illusion of a light beam coming out of a light 211 00:14:16,630 --> 00:14:17,290 source. 212 00:14:17,290 --> 00:14:19,000 So this looks very cool. 213 00:14:19,000 --> 00:14:24,280 It kind of looks like there's a mist effect, and this can really improve the ambience in your game. 214 00:14:24,280 --> 00:14:29,350 When you want to have these bright beams coming out of a particular light source, such as a spotlight 215 00:14:29,350 --> 00:14:35,230 or a street light, and it looks, I would say, very cool and can improve the atmosphere of your game. 216 00:14:35,230 --> 00:14:38,650 And this is very simple to make inside of here. 217 00:14:38,650 --> 00:14:44,950 I just have my top attachment and my bottom attachment with my beam, and my beam has a simple texture. 218 00:14:44,950 --> 00:14:51,250 You can just search in the image section in the toolbox of light beam, and you can grab a light beam 219 00:14:51,250 --> 00:14:52,390 like this one. 220 00:14:52,390 --> 00:14:56,650 Place it inside of your texture, and then you can just manipulate the width at the base and at the 221 00:14:56,650 --> 00:14:58,090 top of your beam. 222 00:14:58,090 --> 00:15:02,500 Change around the brightness, the color, the transparency settings a little bit, and bam! 223 00:15:02,500 --> 00:15:06,970 You've got yourself a nice little light beam coming from a light source. 224 00:15:07,650 --> 00:15:14,970 Another way you can utilize beams is by creating this TV effect over surface. 225 00:15:15,000 --> 00:15:15,840 Guys. 226 00:15:15,840 --> 00:15:22,170 So I've created this little add panel here with a surface guy inside of it, and I've simply just placed 227 00:15:22,170 --> 00:15:26,640 two separate beams inside of here that are basically the exact same thing. 228 00:15:26,640 --> 00:15:31,710 It's just one that has a slightly larger texture length than the other, and they're just moving down 229 00:15:31,710 --> 00:15:36,990 across the two attachments, which is at the top and the bottom of my little ad panel here. 230 00:15:36,990 --> 00:15:43,350 And I'm able to define the length or width of this texture down here, which I've set to 5.25. 231 00:15:43,350 --> 00:15:44,760 If I decrease that. 232 00:15:45,240 --> 00:15:51,000 As you can see, my beam tapers, but in order to match the width of my ad panel here, I've set it 233 00:15:51,000 --> 00:15:52,710 to 5.25 studs. 234 00:15:52,920 --> 00:15:59,580 But as you can see, it creates a very cool, shimmering and like kind of old style TV effect to my 235 00:15:59,580 --> 00:16:04,230 little ad panel here, which again, can really improve the atmosphere inside of your games, especially 236 00:16:04,230 --> 00:16:08,370 if you're trying to go for one of those type of neon punk style games. 237 00:16:08,370 --> 00:16:11,670 This would be perfect for that kind of game design. 238 00:16:12,670 --> 00:16:18,910 So the beam instance in the Roblox API is a powerful tool for creating visually interesting and dynamic 239 00:16:18,910 --> 00:16:20,710 beam effects in your game. 240 00:16:20,710 --> 00:16:26,830 It is personally one of my favorite instances and as demonstrated by these examples here, you can do 241 00:16:26,830 --> 00:16:29,140 a lot of things with beams.